<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>弹幕</title>
<script src="https://cdn1.lncld.net/static/js/av-mini-0.6.4.js"></script>
<style type="text/css">
    html,body{margin:0px;padding:0px;width: 100%;height:100%;font-family: "微软雅黑";font-size: 62.5%;background: #ccc;}
    .boxDom {width:100%; height: 100%; position: relative; overflow: hidden; } 
    .idDom {width: 100%; height: 60px; background: #666; position: fixed; bottom: 0px; } 
    .content {display: inline-block; width:300px; height: 40px; position: absolute; left: 0px; right: 0px; top:0px; bottom:0px; margin:auto;}
    .title {display: inline;line-height: 32px; font-size: 3em; vertical-align:bottom; color:#fff; } 
    .text {border:none; width:200px; height: 28px; border-radius: 5px; font-size: 2.4em; }
    .btn {width:45px;border-radius: 5px; height: 30px; background: #f90000; border:none; color:#fff; font-size: 2.4em;font-family: "微软雅黑";}
    .string {display: table; height: 40px; position: absolute; overflow: hidden; color:#000; font-size: 4em; line-height: 1.5em; cursor: pointer; white-space:nowrap; }
</style>
</head>

<body>
<div class="boxDom" id="boxDom">
    <div class="idDom" id="idDom">
        <div class="content">
            <p class="title">吐槽:</p>
            <input type="text" class="text" id="text" />
            <button type="button" class="btn" id="btn">发射</button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script language="javascript">
   $(function(){
        var pageW=parseInt($(document).width());
        var pageH=parseInt($(document).height());
        var boxDom=$("#boxDom");
        var btnDom=$("#btn");
        var Top,Right;
        var width;
        width=pageW;
        btnDom.bind("click",function(){
            if($("#text").val()!=''){
                var value=$("#text").val();
                auto();
                storage(value);
            }
         });
        document.onkeydown=function(e){
            if(e.keyCode == 13 && $("#text").val()!=''){
                var value=$("#text").val();
                auto();
                storage(value);
            }
        }
        function auto(){
            var creSpan=$("<span class='string'></span>");
            var text=$("#text").val();
            creSpan.text(text);
            $("#text").val("");
            Top=parseInt(pageH*(Math.random()));
            if(Top>pageH-90){
                Top=pageH-90;
            }
            creSpan.css({"top":Top,"right":-300,"color":getRandomColor()});
            boxDom.append(creSpan);
            var spanDom=$("#boxDom>span:last-child");
            spanDom.stop().animate({"right":pageW+300},10000,"linear",function(){
                        $(this).remove();
                    });
        }
        
        function getRandomColor(){
            return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);             
        }
        //数据存储
        AV.initialize('Y9JBjLRl6yHaNfeJWnMUqQPB-gzGzoHsz', 'fcxaHqAEWsJyb8J51135p1EV');
        function storage(string){           
            var Post = AV.Object.extend('Post', {
              //实例方法
              pubUser: function() {
                return this.get('pubUser');
              },
              content: function(){
                return this.get('content');
              }
            }, {
              //类方法
              spawn: function(username,cont) {
                var post = new Post();
                post.set('pubUser', username);
                post.set('content', cont);
                return post;
              }
            });

            var post = Post.spawn('danmu',string);
            //console.log(post.pubUser());
            post.save({
              str: post.pubUser(),          
            }).then(function(post) {

            }, function(err) {

            });           
        } 
            //获取数据
            var query = new AV.Query('Post');
            query.equalTo('pubUser', 'danmu');
            query.find().then(function(results) {
              console.log('Successfully retrieved ' + results.length + ' posts.');
              // 处理返回的结果数据
              var Top=0;
              var Right=-200;      
              for (var i = 0; i < results.length; i++) {
                var object = results[i];
                //console.log(object.id + ' - ' + object.get('content'));
                //一开始显示弹幕开始 
                var creSpan='';
                Top=Top+50;
                Right=Right-300;
                if(Top>=pageH-80){
                    Top=0;
                }
                creSpan +="<span class='string'>"+object.get('content')+"--"+formatDate(object.createdAt)+"</span>";
                boxDom.append(creSpan);                                                                        
                $('#boxDom .string').eq(i).css({"top":Top,"right":Right,"color":getRandomColor()});
                var spanDom=$("#boxDom>span:last-child");
                spanDom.stop().animate({"right":pageW+300},Math.floor(Math.random() *10000 + 10000),"linear",function(){
                            $(this).remove();
                        });

                //一开始显示弹幕结束
              }
              
            }, function(error) {
              console.log('Error: ' + error.code + ' ' + error.message);
            });      
        //数据存储结束

        //时间转换
        var formatDate = function (date) {  
            var y = date.getFullYear();  
            var m = date.getMonth() + 1;  
            m = m < 10 ? '0' + m : m;  
            var d = date.getDate();  
            d = d < 10 ? ('0' + d) : d;
            var h=date.getHours();
            var mi=date.getMinutes();
            mi = mi < 10 ? ('0'+mi) : mi;  
            return y + '-' + m + '-' + d+' '+h+':'+mi;  
        };  
   });
</script>
</html>